﻿@{
    ViewData["Title"] = "Home Page";
}
<style>
    .modal-body select, .modal-body input {
        width: 90%;
        margin: 5px 5%;
    }
    li {
        list-style-type: none;
    }
    ul{
        padding-left:3px;
    }
    .delEatLog, .editFood {
        cursor: pointer;
    }
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="~/images/banner1.jpg" alt="ASP.NET" class="img-responsive" />
            <div class="carousel-caption" role="option">
                <p>
                    宇航老师是大厨
                </p>
            </div>
        </div>
        <div class="item">
            <img src="~/images/banner2.jpg" alt="Visual Studio" class="img-responsive" />
            <div class="carousel-caption" role="option">
                <p>
                    一崑老师画画超级好！
                </p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>每日晚餐</h2>
        <ul>
            @foreach (EatDetailModel e in (ViewBag.LastEat as List<EatDetailModel>).Take(15).ToList())
            {
                <li><span class="text-info">[@(e.EatCount)份]</span>@e.FoodName <span class="pull-right">@e.PersonName <span>&nbsp;&nbsp;</span> @e.EatTime.Value.ToString("MM-dd HH:mm")</span>  </li>
            }
        </ul>
    </div>
    <div class="col-md-4">
        <h2>
            最近清单
            <a class="h5 text-danger pull-right" data-toggle="modal" data-target="#addEatLogModal">[添加清单]</a>
        </h2>
        <ul>
            @foreach (EatDetailModel e in (ViewBag.NearEat as List<EatDetailModel>).Take(15).ToList())
            {
                <li><span class="text-info">[@(e.EatCount)份]</span>@e.FoodName <span class="pull-right">@e.PersonName <span>&nbsp;&nbsp;</span> @e.EatTime.Value.ToString("MM-dd HH:mm")&nbsp;&nbsp;<span class="text-danger delEatLog" data-logid="@e.LogId">[删除]</span></span></li>
            }

        </ul>
    </div>
    <div class="col-md-2">
        <h2>
            菜单
            <a class="h5 text-danger pull-right" data-toggle="modal" data-target="#addFoodModal">[添加菜肴]</a>
        </h2>
        <ul>
            @foreach (FoodModel e in (ViewBag.Menu as List<FoodModel>).Take(15).ToList())
            {
                <li>@e.FoodName<span class="text-warning editFood pull-right" data-foodid="@e.FoodId" data-foodname="@e.FoodName">[修改]</span></li>
            }
        </ul>
    </div>
    <div class="col-md-2">
        <h2>
            成员
            <a class="h5 text-danger pull-right" data-toggle="modal" data-target="#addPersonModal">[添加成员]</a>
        </h2>
        <ul>
            @foreach (PersonModel e in (ViewBag.Person as List<PersonModel>).Take(15).ToList())
            {
                <li>@e.PersonName</li>
            }
        </ul>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="addPersonModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加一个新成员</h4>
            </div>
            <div class="modal-body">
                <input id="personNameInput" placeholder="请输入一个成员的名字" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addPerson">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="addFoodModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加一个新菜肴</h4>
            </div>
            <div class="modal-body">
                <input id="foodNameInput" placeholder="请输入一道菜肴" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addFood">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="editFoodModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改菜肴名称</h4>
            </div>
            <div class="modal-body">
                <input id="foodNameEdit" placeholder="请输入菜肴名称" value="" />
                <input id="foodIdEdit"  value="" type="hidden"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="editFood">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="addEatLogModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加一条新纪录</h4>
            </div>
            <div class="modal-body">
                <input id="eatTimeInput" type="datetime-local" placeholder="请输入记录时间（留空为当前时间）" />
                <select id="personId">
                    <option value="0" selected>请选择用餐者</option>
                    @foreach (PersonModel p in ViewBag.Person as List<PersonModel>)
                    {
                        <option value="@p.PersonId">@p.PersonName</option>
                    }
                </select>
                <select id="foodId">
                    <option value="0" selected>请选择菜肴</option>
                    @foreach (FoodModel p in ViewBag.Menu as List<FoodModel>)
                    {
                        <option value="@p.FoodId">@p.FoodName</option>
                    }
                </select>
                <input id="eatCountInput" type="number" placeholder="请输入数量" value="1" />

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addEatLog">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    setTimeout(function () {
        $("#addPerson").click(function (e) {
            $.getJSON("/Home/AddPerson/?personName=" + $("#personNameInput").val(), function (data) {
                alert(data);
                if (data == "成员插入成功") {
                    $("#addPersonModal").modal('hide');
                    window.location.reload();
                }
            });
        });
        $("#addFood").click(function (e) {
            $.getJSON("/Home/AddFood/?foodName=" + $("#foodNameInput").val(), function (data) {
                alert(data);
                if (data == "菜品插入成功") {
                    $("#addFoodModal").modal('hide');
                    window.location.reload();
                }
            });
        });
        $("#addEatLog").click(function (e) {
            $.getJSON("/Home/AddEatLog/?eatTime=" + $("#eatTimeInput").val() + "&foodId=" + $("#foodId").val() + "&personId=" + $("#personId").val() + "&eatCount=" + $("#eatCountInput").val(), function (data) {
                alert(data);
                if (data == "记录插入成功") {
                    $("#addEatLogModal").modal('hide');
                    window.location.reload();
                }
            });
        });

        $("#viewChange").change(function (e) {
            window.location.search = "?personId=" + $(e.currentTarget).val();

        })

        $(".delEatLog").click(function (e) {
            if (confirm("确定要删除么？不可找回") == true) {
                $.getJSON("/Home/DelEatLog/?LogId=" + e.currentTarget.dataset.logid, function (data) {
                    alert(data);
                    if (data == "删除成功") {
                        window.location.reload();
                    }
                });

            }
        });

        $(".editFood").click(function (e) {
            $("#foodNameEdit").val(e.currentTarget.dataset.foodname);
            $("#foodIdEdit").val(e.currentTarget.dataset.foodid);
            $("#editFoodModal").modal("show");
        });

        $("#editFood").click(function () {
            $.getJSON("/Home/EditFood/?foodName=" + $("#foodNameEdit").val() + "&foodId=" + $("#foodIdEdit").val(), function (data) {
                alert(data);
                if (data == "修改成功") {
                    $("#editFood").modal('hide');
                    window.location.reload();
                }
            });

        });
    }, 1000);
</script>